const canvas = document.getElementById("canvas1") as HTMLCanvasElement;
const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;

ctx.lineWidth = 10; //线条宽度
// createLinearGradient的参数
// x0  起点的 x 轴坐标。
// y0  起点的 y 轴坐标。
// x1  终点的 x 轴坐标。
// y1  终点的 y 轴坐标。
//给整个canvas设置变量
let index = 0;

// 线性渐变
var my_gradient = ctx.createLinearGradient(0, 0, 500, 200);

// addColorStop(offset, color); //0-1 offset



// my_gradient.addColorStop(0, "red");
// my_gradient.addColorStop(0.3, "pink");
// my_gradient.addColorStop(0.5, "blue");
// ctx.fillStyle = my_gradient;
// ctx.rect(0, 0, 600, 200);
// ctx.fill();

// 径向渐变就是向四周渐变
// x0渐变的开始圆的 x 坐标
// y0 渐变的开始圆的 y 坐标
// r0 开始圆的半径
// x1 渐变的结束圆的 x 坐标
// y1 渐变的结束圆的 y 坐标
// r1 结束圆 半径
var grd = ctx.createRadialGradient(50, 50, 10, 50, 50, 20);
grd.addColorStop(0.5, "red");

grd.addColorStop(0.8, "yellow");
// grd.addColorStop(1, "blue");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 100, 100);

